<template>
  <div class="view-wrapper">
    <div class="head">
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
        <el-form-item label="" prop="query">
          <el-input v-model="queryParams.query" placeholder="结算单号/结算卡号/预留手机号/商户账号名称/店铺名称" style="width: 460px" />
        </el-form-item>
        <el-form-item label="操作人：" prop="operator">
          <el-select v-model="queryParams.operator" placeholder="请选择">
            <el-option v-for="dict in operatorList" :key="dict.id" :label="dict.nickName" :value="dict.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="操作时间：">
          <el-date-picker v-model="date" type="daterange" value-format="yyyy-MM-dd" size="small" range-separator="至"
            @change="getTime" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="listBox">
      <div class="topBtn" style="margin-bottom: 14px">
        <el-tabs v-model="changeIndex" type="card" @tab-click="handleClick">
          <el-tab-pane :label="item.value" :name="item.id" v-for="(item, index) in labList" :key="index"></el-tab-pane>
        </el-tabs>
        <div>
          <export-excel-button title="商户结算信息" action="/sheneye/merchant/settle/v1/export" :params="ExportParams" />
        </div>
      </div>
      <el-table v-loading="loading" :data="tableList" stripe border>
        <el-table-column label="序号" type="index" width="55" align="center" fixed />
        <el-table-column label="管辖区域" align="center" prop="area" />
        <el-table-column label="结算单号" align="center" prop="settleNo" />
        <el-table-column label="商户账号名称" align="center" prop="merchantName" />
        <el-table-column label="店铺名称" align="center" prop="shopName" />
        <el-table-column label="申请结算金额" align="center" prop="applyMoney" />
        <el-table-column label="结算方式" align="center" prop="status">
          <template slot-scope="scope">
            <dict-tag :options="settleTypeLs" :value="scope.row.settleType" />
          </template>
        </el-table-column>
        <el-table-column label="开户名称" align="center" prop="settleBankAccountName" />
        <el-table-column label="所属开户行" align="center" prop="settleBankBranch" />
        <el-table-column label="开户行卡号" align="center" prop="settleBankNo" />
        <el-table-column label="预留手机号" align="center" prop="settleBankPhone" />
        <el-table-column label="状态" align="center" prop="status">
          <template slot-scope="scope">
            <dict-tag :options="labList" :value="scope.row.status" />
          </template>
        </el-table-column>
        <el-table-column label="申请时间" align="center" prop="applyTime" width="100px"></el-table-column>
        <el-table-column label="备注" align="center" prop="thirdPartyNo"></el-table-column>
        <el-table-column label="操作人" align="center" prop="operator"></el-table-column>
        <el-table-column label="操作时间" align="center" prop="operatorTime" width="100px"></el-table-column>
        <el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <!-- <el-button size="mini" type="text" @click="queryOrders(scope.row.settleNo)">赚卡明细</el-button>
            <el-button size="mini" type="text" @click="cardOrders(scope.row.settleNo)">打卡活动订单</el-button> -->
            <el-button size="mini" type="text" @click="transactionDetails(scope.row.settleNo)">交易明细</el-button>
            <el-button class="elButton" size="mini" type="text" @click="settlementClick(scope.row.id)" v-if="scope.row.status == 1">手动结算</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </div>
    <!-- 手动结算 -->
    <el-dialog title="手动结算" :visible.sync="outerVisible" width="500px" :close-on-click-modal="false">
      <div class="prop_title">结算信息：</div>
      <div class="prop_detail">商户账号名称：{{ info.merchantName }}</div>
      <div class="prop_detail">店铺名称：{{ info.shopName }}</div>
      <div class="prop_detail">申请提现金额：￥{{ info.applyMoney }}</div>
      <div class="prop_detail">提现卡号：{{ info.settleBankNo }}</div>
      <div class="prop_detail">银行预留手机号：{{ info.settleBankPhone }}</div>
      <el-dialog width="500px" :title="dialogType == 3 ? '确认打款' : '拒绝打款'" :visible.sync="innerVisible" append-to-body
        :close-on-click-modal="false">
        <template v-if="dialogType == 3">
          <div class="prop_detail">是否确认已向提现卡号：{{ info.settleBankNo }}打款{{ info.applyMoney }}元</div>
          <div class="prop_input_box">
            <span>备注：</span>
            <el-input placeholder="请输入" v-model="thirdPartyNo" style="width: 320px" />
          </div>
        </template>
        <template v-if="dialogType == 2">
          <div class="prop_detail">是否拒绝{{ info.merchantName }}的提现申请</div>
          <div class="prop_input_box">
            <span>拒绝原因：</span>
            <el-input placeholder="请输入" v-model="refuse" style="width: 320px" />
          </div>
        </template>
        <div slot="footer" class="dialog-footer">
          <el-button @click="innerVisible = false">取消</el-button>
          <el-button type="primary" :loading="sumitLoading" @click="sumitVliew">确认</el-button>
        </div>
      </el-dialog>
      <div slot="footer" class="dialog-footer">
        <el-button @click="outerVisible = false">取 消</el-button>
        <el-button type="primary" @click="innerVisibleClick(3)">确认打款</el-button>
        <el-button type="danger" @click="innerVisibleClick(2)">拒绝打款</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  settleList,
  settleDetail,
  manualSettlement,
  settleV1OperatorList
} from "@/api/syFundManagement/merchantSettlement";
import ExportExcelButton from "@/components/ExportExcelButton/index";
export default {
  name: "Customer",
  components: {
    ExportExcelButton,
  },
  data() {
    return {
      outerVisible: false,
      innerVisible: false,
      // 遮罩层
      loading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      tableList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        query: "", //结算单号/结算卡号/预留手机号/商户帐号名称/店铺名称
        status: "", //结算状态 字典值 shenye_merchant_settle_status
        operator: "", //操作人
        operatorStartTime: "",//操作开始时间
        operatorEndTime: "",//操作结束时间
      },
      typeList: [{ //交易类型数组
        id: '',
        value: '全部',
      },],
      changeIndex: '0',
      labList: [], //状态lab
      info: {}, //结算信息
      dialogType: 1, //3：确认打款 2：拒绝打款
      sumitLoading: false,
      refuse: '',//拒绝原因
      thirdPartyNo: '',//结算单号
      settleTypeLs: [],//结算方式数组
      operatorList: [],//操作人数组
      date: [],//操作时间
    };
  },
  computed: {
    ExportParams() {
      const params = {
        ...this.queryParams,
      };
      return params;
    },
  },
  created() {
    this.getAdminDict();
    this.getList();
    this.getOperatorList();
  },
  methods: {
    //获取操作人列表
    getOperatorList(id) {
      settleV1OperatorList().then(res => {
        this.operatorList = res.result
      })
    },
    // 操作时间改变
    getTime(e) {
      console.log("e", e)
      this.queryParams.operatorStartTime = e[0]
      this.queryParams.operatorEndTime = e[1]
    },
    handleClick(tab, event) { //状态选择
      this.changeIndex = tab.index
      this.queryParams.status = tab.name
      this.queryParams.pageNum = 1
      this.getList()
    },
    //查看交易明细
    transactionDetails(settleNo) {
      this.$router.push({
        path: 'summaryOfDetails',
        query: {
          settleNo: settleNo
        }
      })
    },
    // // 赚卡明细
    // queryOrders(settleNo) {
    //   this.$router.push({
    //     path: 'yeCard/detailsList',
    //     query: {
    //       settleNo: settleNo,
    //     }
    //   })
    // },
    // //查看打卡活动详情
    // cardOrders(settleNo) {
    //   this.$router.push({
    //     path: 'consumeMiningManagement/checkinActivityOrderList',
    //     query: {
    //       settleNo: settleNo,
    //       type: 1,
    //     }
    //   })
    // },
    //手动结算
    settlementClick(id) {
      settleDetail(id).then(res => {
        this.info = res.result
      })
      this.outerVisible = true
    },
    //获取字典
    getAdminDict() {
      var dictType = "shenye_merchant_settle_status,manage_settle_bank_type";
      this.$getSelectList(dictType)
        .then((res) => {
          var arr = [{
            id: "",
            value: "全部",
          },];
          this.labList = arr.concat(res.result[0].dictList);
          this.settleTypeLs = res.result[1].dictList;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      settleList(this.queryParams).then(response => {
        this.total = response.result.total
        this.tableList = response.result.records
        this.loading = false;

      }).finally(() => {
        this.loading = false;
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.changeIndex = '0'
      this.date = []
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        query: "", //结算单号/结算卡号/预留手机号/商户帐号名称/店铺名称
        status: "", //结算状态 字典值 shenye_merchant_settle_status
        operator: "", //操作人
        operatorStartTime: "",//操作开始时间
        operatorEndTime: "",//操作结束时间
      }
      this.handleQuery();
    },
    // 
    innerVisibleClick(type) {
      this.dialogType = type
      this.refuse = ''
      this.thirdPartyNo = ''
      this.innerVisible = true
    },
    //确认
    sumitVliew() {
      // if (this.dialogType == 3 && this.thirdPartyNo == '') {
      //   this.$message.error("请输入备注")
      //   return
      // } 
      if (this.dialogType == 2 && this.refuse == '') {
        this.$message.error("请输入拒绝原因")
        return
      }
      let data = {
        id: this.info.id,
        refuse: this.refuse, //拒绝原因
        status: this.dialogType, //结算状态 2 结算失败 3 结算成功
        thirdPartyNo: this.thirdPartyNo //结算单号
      }
      this.sumitLoading = true
      manualSettlement(data).then(response => {
        this.$message.success("操作成功")
        this.queryParams.pageNum = 1
        this.getList()
        this.getOperatorList();
        setTimeout(() => {
          this.outerVisible = false
          this.innerVisible = false
          this.sumitLoading = false
        }, 800)
      }).catch(() => {
        this.sumitLoading = false;
      })
    },
  }
};

</script>
<style lang="scss" scoped>
.head {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  padding: 20px 20px 0;

}
.elButton{
  margin-left: 0;
}
.head_st {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  border-radius: 8px;
  margin-bottom: 14px;
  background: #F3F5F7;
}

.card_d {
  // width: 420px;
  padding: 0 0px 0 20px;
  height: 100px;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  margin-right: 14px;
  background-color: #fff;
  margin-bottom: 10px;

  .list {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
    justify-content: center;
    margin-right: 20px;

    p:nth-child(1) {
      font-size: 20px;
      font-weight: bold;
      color: #555;

    }

    p:nth-child(2) {
      font-size: 18px;
      color: #555;
      margin-top: 20px;
    }
  }
}

.listBox {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  //   height: 120px;
  padding: 20px 20px;
  margin-top: 10px;
}

.topBtn {
  display: flex;
  justify-content: space-between;
}

.prop_title {
  font-size: 16px;
  color: #000;
  margin-bottom: 10px;
}

.prop_detail {
  margin-bottom: 10px;
  font-size: 15px;
}

.prop_input_box {
  display: flex;
  align-items: center;
}
</style>
